<template>
  <div id="header">
    <img class="hbian" src="../assets/images/pic1@2x.png" style="z-index: 9;">
    <!-- 电脑端头部 -->
    <div class="htop hidden-xs">
      <div class="headerbox">
        <div @click="getrouter(item)" v-for="(item,index) in tabs" :key="index" class="hlist" :style="index==3?'width: 16%':''">
          <div :class="active == item.active?'header_active heaser':'heaser'" v-if="index!=3">
            <span class="headerHea">{{item.abbreviation}}</span>
            <div class="hname">
              <div class="name1">
                {{item.en}}
              </div>
              <div class="name2">
                {{item.cn}}
              </div>
            </div>
          </div>
          <div class="headerLogo" v-if="index==3">
            <img src="../assets/images/Wchlogo.png" style="width: 130px;height: 90px;object-fit: cover;">
            <h1>微藏汇</h1>
          </div>
          <div class="heaserIcon" v-if="index!=tabs.length-1">
            <img src="../assets/images/line@2x.png">
          </div>
        </div>
      </div>
    </div>
    <!-- 移动端 -->
     <div class="ly_nav visible-xs-block" style="height: 100px;background-color: #ece1d6;">
        <div style="position: absolute;left: 15px;top: 38px;display: flex;align-items: center;">
          <img style="width: 65px;height: 45px;margin-right: 10px;" src="../assets/images/Wchlogo.png">
          <span style="font-size: 16px;font-weight: bold;">微藏汇</span>
        </div>
        <div class="nav_menu">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div class="nav_list">
          <ul class="clear">
            <li :id="'navId'+item.active" @click="getrouter(item)" v-for="(item,index) in tabs" :key="index">
              <div class="hd">
                <span href="javaScript:void(0);">{{item.cn}}</span>
              </div>
            </li>
          </ul>
          <div class="nav_mask"></div>
        </div>
      </div>
  </div>
</template>

<script>
  $(document.body).on("click", '.hd, .open', function(event) {
    $('.nav_list').removeClass('open')
  })
  $(document.body).on("click", '.nav_menu', function(event) {
    $('.nav_list').toggleClass('open')
  })
  export default {
    name: '',
    components: {},
    props: [],
    data() {
      return {
        active: 0,
        tabs: [{
            abbreviation: '首',
            en: 'home',
            cn: '首页',
            active: 0,
            router: '/'
          },
          {
            abbreviation: '我',
            en: 'we',
            cn: '我们',
            active: 1,
            router: '/my'
          },
          {
            abbreviation: '拍',
            en: 'auction',
            cn: '拍卖',
            active: 2,
            router: '/auction'
          },
          {},
          {
            abbreviation: '服',
            en: 'service',
            cn: '服务',
            active: 3,
            router: '/service'
          },
          {
            abbreviation: '资',
            en: 'news',
            cn: '资讯',
            active: 4,
            router: '/information'
          },
          {
            abbreviation: '商',
            en: 'settle',
            cn: '入驻',
            active: 5,
            router: '/contact'
          },
        ]
      }
    },
    computed: {},
    watch: {
      $route: {
        immediate: true,
        handler() {
          this.active = this.$route.meta.active
          $('.active').removeClass('active')
          document.getElementById("navId" + this.active).className = "active";
        }
      }
    },
    created() {},
    mounted() {},
    methods: {
      getrouter(e) {
        sessionStorage.setItem('scrollTop',0)
        $('.active').removeClass('active')
        this.$router.push({path: e.router,query: {}})
      },
      navbtn() {
        this.$refs.navbutton.click()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .hbian {
    width: 100%;
  }

  // pc端
  .htop {
    width: 100%;
    padding-top: 30px;
    background-color: rgb(235, 225, 213);
  }

  .headerbox {
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1200px;
  }

  .hlist {
    display: flex;
    width: 14%;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .headerbox .heaser {
    width: 42px;
    cursor: pointer;
  }

  .headerbox>div span {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: bold;
    text-align: center;
    line-height: 38px;
  }

  .header_active .headerHea {
    background: #C1101C;
    color: #FFFFFF;
    border: 1px solid #C1101C;
  }

  .headerHea {
    background: #EBE1D5;
    border: 1px solid #2A1102;
  }

  .hname {
    position: relative;
    margin-top: 8px;
    width: 48px;
    height: 78px;
    line-height: 14px;
    writing-mode: vertical-lr;
    writing-mode: tb-lr;
  }

  .hname .name1 {
    font-size: 11px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #110701;
    margin-top: 8px;
    margin-left: 5px;
  }

  .hname .name2 {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #110701;
    margin-top: 8px;
    font-weight: bold;
  }

  .header_active .hname {
    background: url(../assets/images/hover@2x.png) no-repeat;
    background-size: 100%;
  }

  .heaserIcon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .heaserIcon img {
    width: 2px;
    height: 53px;
  }

  .headerLogo {
    text-align: center;
  }

  .headerLogo img {
    width: 78px;
    height: 78px;
  }

  .headerLogo h1 {
    font-size: 30px;
    font-family: SimSun;
    font-weight: 400;
    color: #412D20;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
  }
  
  /* 手机端/小屏设备b */
  @media only screen and (min-width: 100px) and (max-width: 998px) { 
  	.header {
  	  width: 100%;
  	  height: 13.4375rem;
  	  background: #EBE1D5;
  	  overflow-x: auto;
  	}
  	.hbian {
  		height: 2.8125rem;
  		width: auto;
  		position: absolute;
  		right: 0;
  	}
  	.headerbox {
  		padding: 0;
  		margin-top: 3rem;
  	}
  	.headerLogo img{
  		width: 4.25rem;
  		height: 4.25rem;
  	}
  	.headerLogo h1 {
  		font-size: 1.875rem;
  		font-family: SimSun;
  		font-weight: 400;
  		color: #412D20;
  		margin-top: 1rem;
  		margin-bottom: 0;
  		white-space: nowrap;
  	}
  	.headerLogo {
  		padding:  1.25rem 1.875rem 1.25rem 1.25rem;
  		// border-right:0.0625rem solid rgba(83, 43, 11, 0.14);
  	}
  	.heaserIcon img {
  	  width: 2px;
  	  height: auto;
  	  
  	  margin: auto ;
  	}
  	.headerbox .heaser {
  	  width: auto;
  	  cursor: pointer;
  	  margin: 0 1.875rem;
  	}
  	.header_active .headerHea {
  	  background: #C1101C;
  	  color: #FFFFFF;
  	  border: 1px solid #C1101C;
  	}
  	.headerbox > div span {
  	  display: block;
  	  width: 3.25rem;
  	  height: 3.25rem;
  	  border-radius: 50%;
  	  font-size: 1.875rem;
  	  font-family: PingFang SC;
  	  font-weight: bold;
  	  text-align: center;
  	  line-height: 3.25rem;
  	}
  	.header_active .hname {
  	  // background: url(../assets/images/hover@3x.png) no-repeat;
  	  background-size: 100%;
  	}
  	.hname {
  	  position: relative;
  	  margin-top: 0.5rem;
  	  width: 4.0375rem;
  	  height: 5.375rem;
  	  line-height: 1.275rem;
  	  writing-mode: vertical-lr;
  	  writing-mode: tb-lr;
  	}
  	
  	.hname .name2 {
  	  font-size: 12px;
  	  font-family: Source Han Sans CN;
  	  font-weight: 300;
  	  color: #110701;
  	  margin-top: 0.75rem;
  	}
  	.hname .name1 {
  	  font-size: 9px;
  	  font-family: Source Han Sans CN;
  	  font-weight: 300;
  	  color: #110701;
  	  margin-top: 0.7125rem;
  	  margin-left:0.325rem;
  	}
    .ly_nav{
      position: relative;
    }
    .ly_nav .nav_menu {
      display: block;
      padding: 10px 7px;
      margin: 0;
      position: absolute;
      top: 37px;
      right: 15px;
    }
    .ly_nav .nav_menu span {
      display: block;
      width: 24px;
      height: 2px;
      background-color: #000;
      border-radius: 1px;
    }
    .ly_nav .nav_menu span + span {
      margin-top: 6px;
    }
    .ly_nav .nav_list {
      width: 60%;
      height: 100%;
      margin: 0;
      padding: 0;
      position: fixed;
      top: 0;
      right: -200%;
      z-index: 9999;
      transition: 0.8s;
      -webkit-transition: 0.8s;
      box-sizing: border-box;
    }
    .ly_nav .nav_list ul {
      width: 60%;
      height: 100%;
      background-color: #fff;
      position: relative;
      z-index: 9999;
      float: right;
    }
    .clear {
      clear: both;
    }
    .ly_nav .nav_list > ul > li:hover, .ly_nav .nav_list > ul > li.active {
      background-color: #d9bc98;
    }
    .ly_nav .nav_list ul > li {
      width: 100%;
      overflow: hidden;
      margin: 0 auto;
      padding: 0;
      background: none;
      box-sizing: border-box;
      position: relative;
      height: auto;
      list-style: none;
      text-align: center;
      float: left;
    }
    .ly_nav .nav_list > ul > li:hover:before, .ly_nav .nav_list > ul > li.active:before {
      content: '';
      display: block;
      width: 54%;
      left: 50%;
      margin-left: -27%;
      height: 3px;
      position: absolute;
      bottom: -8px;
      background-color: #ff424c;
      transition: all 1s;
    }
    .ly_nav .nav_list ul > li .hd>span {
      display: block;
      width: 100%;
      line-height: 60px;
      color: #333;
      font-size: 16px;
      text-align: left;
      padding: 0 60px 0 20px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    .ly_nav .nav_list > ul > li:hover >.hd> span, .ly_nav .nav_list > ul > li.active >.hd> span {
      color: #fff;
    }
    .clear:after {
      display: block;
      overflow: hidden;
      clear: both;
      height: 0;
      visibility: hidden;
      content: ".";
    }
    .ly_nav .nav_list .nav_mask {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      position: absolute;
      left: 0;
      top: 0;
      z-index: 9998;
    }
    .ly_nav .open {
      width: 100%;
      overflow: hidden;
      height: 100%;
      right: 0%;
      z-index: 99999;
    }
  }
  
  /* 手机端/小屏设备End */
</style>